<template>
  <!-- 轮播图区域 -->
  <div>
    <van-swipe class="header-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in bannerList" :key="item.bannerid">
        <img :src="item.img" :alt="item.alt" />
      </van-swipe-item>
    </van-swipe>
    <!-- 宫格区域 -->
    <van-grid :column-num="5" :border="false" :clickable="true">
      <van-grid-item
        v-for="item in gridList"
        :key="item.id"
        :icon="item.url"
        :text="item.text"
      />
    </van-grid>
  </div>
  <!-- 秒杀区域 -->
  <van-count-down :time="countDown">
    <template #default="timeData">
      <span>{{ countDownContent.content }}</span>
      <span>{{ countDownContent.time }}</span>
      <span class="block">{{ timeData.hours }}</span>
      <span class="colon">:</span>
      <span class="block">{{ timeData.minutes }}</span>
      <span class="colon">:</span>
      <span class="block">{{ timeData.seconds }}</span>
    </template>
  </van-count-down>
  <!-- 秒杀商品列表 -->
  <div class="skill-list">
    <div class="skill-item" v-for="item in apiSeckillList" :key="item.proid">
      <img :src="item.img1" alt="" class="item-img" />
      <p class="item-price">￥{{ item.originprice }}</p>
    </div>
  </div>
  <!-- 商品列表 -->
  <van-pull-refresh
    class="goods-refresh"
    v-model="refreshLoading"
    @refresh="onRefresh"
  >
    <div class="goods-list">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        class="goods-item"
      >
        <van-cell v-for="item in productList" :key="item.proid" @click="goToDetail(item.proid)">
          <div class="item-imgbox">
            <img :src="item.img1" alt="" />
          </div>
          <div>
            <p>{{ item.proname }}</p>
            <p>￥{{ item.originprice }}</p>
          </div>
        </van-cell>
      </van-list>
    </div>
  </van-pull-refresh>
</template>

<script setup lang="ts">
import {
  useSwiper,
  useGridList,
  useSeckillList,
  useProductList,
} from "@/hooks/HomeViewHook";


const { bannerList } = useSwiper();

const { gridList } = useGridList();

const { countDown, countDownContent, apiSeckillList } = useSeckillList();

const { refreshLoading, onRefresh, loading, finished, onLoad, productList ,goToDetail} =
  useProductList();
</script>

<style lang="scss" scoped>
.header-swipe {
  height: 400px;
  .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    img {
      width: 100%;
      height: 400px;
    }
  }
}
.skill-list {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  .skill-item {
    .item-img {
      width: 100%;
      height: 100px;
    }
    .item-price {
      font-size: 12px;
      margin: 5px auto;
      text-align: center;
      font-weight: bold;
      color: #ee0a24;
    }
  }
}
.goods-refresh {
  overflow: inherit;
  .goods-list {
    display: flex;
    width: 100%;
    .goods-item {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      width: 100%;
      margin: 10px;
      border-radius: 10px;
      margin: 8px 0;
      overflow: hidden;
      .van-cell {
        width: 48%;
        margin-top: 10px;
      }
      .item-imgbox {
        width: 100%;
        img {
          display: block;
          width: 100%;
        }
      }
    }
  }
}

.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}
</style>
